﻿<!DOCTYPE HTML>
<html lang="zh-cn">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="width=device-width,initial-scale=1.0" name="viewport">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <meta content="email=no" name="format-detection">
  <title>系统管理</title>
  <link rel="stylesheet" href="Content/bootstrap.min.css">
  <link rel="stylesheet" href="Content/bootstrap-table.css">
  <link rel="stylesheet" href="Content/jquery.treegrid.min.css">
  <style>
    .glyphicon-triangle-right{
	   background-image: url(./img/expand.png);
	}
	.glyphicon-triangle-bottom{
	   background-image: url(./img/collapse.png);
	}
  
  </style>
</head>

<body>
  <div class="container">
    <h1>Table Treegrid</h1>
    <table id="table"></table>
  </div>
</body>
<script src="https://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="./Scripts/bootstrap.min.js"></script>
<script src="./Scripts/bootstrap-table.js"></script>
<script src="./Scripts/bootstrap-table-treegrid.js"></script>
<script src="./Scripts/jquery.treegrid.min.js"></script>
<script type="text/javascript">
  $(function () {  
            var $table = $("#table");  
            $table.bootstrapTable({  
                url:'json/treegrid.json',  
                striped:true,  
                sidePagenation:'server',  
                idField:'id',  
                columns:[  
                    {  
                        field: 'ck',  
                        checkbox: true  
                    },{  
                        field:'name',  
                        title:'名称'  
                    },{
					  field: 'status',
					  title: '操作',
					  align: 'center',
					  formatter: 'statusFormatter'
					}
                ],  
                treeShowField: 'name',  
                parentIdField: 'pid',  
                onLoadSuccess: function(data) {  
                    $table.treegrid({  
                        initialState: 'collapsed',//收缩  
                        treeColumn: 1,//指明第几列数据改为树形  
                        expanderExpandedClass: 'glyphicon glyphicon-triangle-bottom',  
                        expanderCollapsedClass: 'glyphicon glyphicon-triangle-right',  
                        onChange: function() {  
                            $table.bootstrapTable('resetWidth');  
                        }  
                    });  
                }  
            });  
        }) 

	   // 格式化状态
	  function statusFormatter(value, row, index) {
		  return '<button type="button" class="btn btn-xs btn-success" onclick="hehe('+value+')">编辑</button>'+
		         '<button type="button" class="btn btn-xs btn-success" onclick="hehe('+value+')">编辑</button>';
	  }
      function hehe(id){
	     console.log(id);
	  }	  
</script>

</html>
